<template>
	<view class="w-100">
		<view class="flex-1 row-ac border-bottom bg-white tab-box">
			<view class="flex-1 order-tab row-a-j-fc" v-for="(item,index) in orderTab" :key="index"
				:class="{active:tabIndex ==index}" @click="clickTab(item, index)">
				<view class="tab-name font-s-4">{{ item.name }}</view>
				<view class="tab-seat mt-2"></view>
			</view>
		</view>
		<view class="flex-1" style="height: 40px;"></view>
		<view class="flex-1 mx-3 mt-2">
			<view class="flex-1 order-item" v-for="(item,index) in orderList" :key="index">
				<view class="flex-1 mx-3">
					<view class="py-2 row-ac">
						<view class="font-s-3 flex-1" @click="paste(item.order_number)">订单号:{{ item.order_number }} <text class="copy-box">复制</text></view>
						<view class="font-s-3 font-w">{{ item.is_report == true ? '报单成功' : '未报单' }}</view>
					</view>
					<view class="flex-1 d-f">
						<view class="flex-1 row-ac mr-2">
							<view class="scroll-box">
								<scroll-view scroll-x class="scroll-row">
									<view class="scroll-row-item scroll-item" v-for="(item1,index1) in item.items">
										<view class="pro-img">
											<image :src="item1.product.image_list[0].url" class="pro-img" mode="">
											</image>
										</view>
										<view class="flex-1 mt-1 in1line font-s-2">{{ item1.product.product_name }}
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view>
							<view class="font-s-3 font-w" v-if="item.is_report == true">
								{{ item.is_paid == true ? '已付款' : '未付款' }}
							</view>
							<view class="font-s-4 mt-3">￥{{ item.order_amount }}</view>
						</view>
					</view>
					<view class="py-2 flex-1 row-ac justify-end">
						<view class="order-info font-s-3" @click="toOrder(item)">报单详情</view>
						<view class="to-pay font-s-3  ml-3"
							v-if="item.superior_user == item.user || item.superior_user == null"
							@click="showDelete(item.id)">删除报单
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		orderListUrl,
		ordersDeleteUrl
	} from "@/api/index.js"
	export default {
		data() {
			return {
				queryInfo: {
					is_paid: '',
					is_report: ''
				},
				tabIndex: 0,
				orderTab: [{
						id: 0,
						name: "全部报单"
					},
					{
						id: 1,
						name: "报单成功"
					},
					{
						id: 3,
						name: "未报单"
					}
				],
				orderList: []
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.getOrderList()
			} else {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			}
		},
		methods: {
			clickTab(item, index) {
				this.tabIndex = index
				if (this.tabIndex == 0) {
					this.queryInfo.is_report = 1
					this.queryInfo.is_paid = 0
				} else if (this.tabIndex == 1) {
					this.queryInfo.is_report = 1
					this.queryInfo.is_paid = 1
				} else if (this.tabIndex == 2) {
					this.queryInfo.is_report = 0
					this.queryInfo.is_paid = 0
				}
				this.getOrderList()
			},
			getOrderList() {
				this.$R.get(orderListUrl, this.queryInfo).then(res => {
					this.orderList = res.data.list

				})
			},
			showDelete(orderId) {
				uni.showModal({
					title: '提示',
					content: '是否删除报单？',
					success: (res) => { // 使用箭头函数
						if (res.confirm) {
							this.toDelete(orderId)
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
			toDelete(orderId) {
				this.$R.delete(ordersDeleteUrl + orderId + '/').then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.getOrderList()
					}
				})
			},
			toOrder(item) {
				if(item.is_report == true){
					uni.navigateTo({
						url: '/pages/order/order-details?orderId=' + item.id,
					});
				}else{
					uni.navigateTo({
						url: '/pages/order/report?orderId=' + item.id,
					});
				}
			},
			paste(value) {
				uni.setClipboardData({
					data: value
				});
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.tab-box {
		height: 40px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

		.order-tab {
			height: 40px;

			.tab-seat {
				width: 120rpx;
				height: 6rpx;
			}
		}
	}



	.active .tab-name {
		color: #000;
	}

	.active .tab-seat {
		background-color: #000;
	}

	.order-item {
		height: 380rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.scroll-box {
		width: 510rpx;
		height: 200rpx;

		.scroll-item {
			width: 160rpx;
			height: 180rpx;
			margin-right: 18rpx;
		}

		.pro-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 18rpx;
		}
	}

	.to-pay,
	.order-info {
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 26rpx;
	}

	.to-pay {

		border: 1rpx solid #000;
		color: #000;
	}

	.order-info {
		border: 1rpx solid #000;
		color: #000;
	}
	
	.copy-box{
		padding: 3rpx 12rpx;
		border: 1rpx solid #aaa;
		color: #aaa;
		margin-left: 15rpx;
	}
</style>